define([
  'fe-header',
  'fe-fpanel',
  'fe-footer'
], (...vue) => {

  const [
    FeHeader, FilterPanel, FeFooter
  ] = vue;

  const WorksList = {
    template: `<main>

    <fe-header>
      <li v-for='(menu, index) in navMenus' :class="{ 'am-active': index === curNavMenu }" @click='curNavMenu = index'>
        <router-link to=''>{{ menu.name }}</router-link>
      </li>
    </fe-header>

    <article class="am-g am-margin-top">
      <filter-panel></filter-panel>

      <!-- 作品列表 -->
      <div class="am-u-sm-12 am-u-md-4 am-u-lg-3" v-for='works in worksData'>
        <section class="am-panel am-panel-default">
          <div class="dg-panel-bd">
            <a href="worksDetail.html"><img class="am-radius am-img-responsive am-center" src="./static/1.jpg" alt=""></a>
          </div>
          <footer class="am-panel-footer">
            <div class="am-cf works-footer">
              <span class="am-fl am-link-muted">作者名称</span>
              <i class="am-icon-commenting-o am-fr">（0）</i>
              <i class="am-icon-heart am-fr">（10）</i>
            </div>
          </footer>
        </section>
      </div>

      <div class="am-u-end"></div>
    </article>
    </main>`.replace(/[\r\n]/g, ""),
    data() {
      return {
        worksData: [
          {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
        ],
        curNavMenu: 0,
        navMenus: [
          {
            name:　'所有作品',
            href: '#'
          },
          {
            name:　'所有设计师',
            href: '#'
          },
        ]
      }
    },
    components: {
      FeHeader, FilterPanel, FeFooter
    }
  }

  return WorksList;
});